<!-- 用户详情 -->
<template>
    <div>
        <div aria-label="A complete example of page header" class="pageview">
            <el-skeleton :rows="15" animated :loading="loading">
                <div style="margin-top:10px;" v-loading="editload">
                    <el-form :label-position="top" ref="form" label-width="80px">
                        <el-descriptions title="用户详情" direction="vertical" :column="2" border>
                            <template #extra>
                                <div class="flex items-center">
                                    <el-button type="primary" :disabled="isPublish == '1'" v-show="isshow"
                                        @click="edit">编辑</el-button>
                                    <el-button type="danger" v-show="isshow == false" @click="saveedit">保存
                                    </el-button>
                                    <el-button type="danger" v-show="isshow == false" @click="quxiao">取消
                                    </el-button>
                                </div>
                            </template>
                            <el-descriptions-item label="名称">
                                <el-tag v-if="isshow"> {{ name }} </el-tag>
                                <el-input v-else v-model="name" placeholder="请输入名称" />
                            </el-descriptions-item>
                            <el-descriptions-item label="账号">
                                <el-tag v-if="isshow"> {{ account }}</el-tag>
                                <el-input v-else maxlength="11" v-model="account" placeholder="请输入用户账号/手机号"
                                    show-word-limit />
                            </el-descriptions-item>
                            <el-descriptions-item label="昵称">
                                <el-tag v-if="isshow"> {{ nick }}</el-tag>
                                <el-input v-else v-model="nick" placeholder="请输入内容" />
                            </el-descriptions-item>
                            <el-descriptions-item label="性别">
                                <el-tag v-if="isshow">{{ gender }}</el-tag>
                                <el-select v-else v-model="gender" placeholder="请选择性别" style="width:100%">
                                    <el-option label="男" value="男"></el-option>
                                    <el-option label="女" value="女"></el-option>
                                </el-select>
                            </el-descriptions-item>
                            <el-descriptions-item label="生日">
                                <el-tag v-if="isshow">{{ birthday }}</el-tag>
                                <el-date-picker v-else type="date" placeholder="选择日期" v-model="birthday"
                                    style="width: 100%;" />
                            </el-descriptions-item>
                            <el-descriptions-item label="组织·职务">
                                <template v-if="item.length != 0 && dialogVisibleA == false">
                                    <el-tag style="margin-left:5px" :key="obj.oid" v-for="obj in item">
                                        {{ obj.oname }}-{{ obj.zname }}</el-tag>
                                </template>
                                <el-tag v-else>无</el-tag>
                                <el-button style="float: right;" size="mini" type="warning" @click="select">
                                    更改</el-button>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-form>
                    <!-- 弹出框 树形控件-->
                    <el-dialog title="选择组织·职务" :closeOnClickModal="false" v-model="dialogVisibleA" v-if="dialogVisibleA"
                        :destroy-on-close="true" width="40%">
                        <div id="treeA">
                            <el-skeleton :rows="8" :loading="loading" animated>
                                <!-- 树形控件 -->
                                <el-tree max-height="700" ref="tree" :default-checked-keys="checked" :data="data"
                                    @check-change="change" :check-strictly="true" :default-expand-all="true" show-checkbox
                                    node-key='id' :props="defaultProps" accordion>
                                    <template #default="{ node, data }">
                                        <span>
                                            <span style="margin-left:10px" size="mini">{{ node.label }}</span>
                                            <template v-for="obj in item">
                                                <el-tag :key="obj.id" style="margin-left:10px"
                                                    v-if="obj != '' && obj.oid == data.id" size="mini">{{ obj.zname }}
                                                </el-tag>
                                            </template>
                                        </span>
                                    </template>
                                </el-tree>
                                <el-button id="btn" :disabled="disabled" type="primary" @click="confirmsave" size="mini"
                                    plain>
                                    确认
                                </el-button>
                            </el-skeleton>
                        </div>
                    </el-dialog>
                    <!-- 表格弹出框 选择组织·职务-->
                    <el-dialog title="选择职务" :showClose="false" :closeOnClickModal="false" v-model="dialogVisibleB"
                        v-if="dialogVisibleB" :destroy-on-close="true" width="40%">
                        <div id="treeB">
                            <!-- 子组件 -->
                            <zhiwu :lv="lv" :ids="ids" :names="names" @zhiwu="zhiwu" />
                        </div>
                    </el-dialog>
                </div>
            </el-skeleton>
        </div>
    </div>
</template>

<script lang="ts">
import zhiwu from "../../../views/organization/user/zhiwu.vue"
import { defineComponent, getCurrentInstance, onMounted, reactive, toRefs } from 'vue'
import { ElMessage, ElMessageBox, ElNotification, ElNotification as notify } from 'element-plus'
import { GetSingleUser, UpdateUser, GetOrganizations, MoveUserToOrg } from "../../../api/user/user";
import router from '../../../router';
import { useRoute } from 'vue-router';
export default defineComponent({
    components: {
        zhiwu,
    },
    setup() {
        const route = useRoute();
        const { ctx } = getCurrentInstance() as any;
        //界面加载时发生
        onMounted(() => {
            event.userxiangqing();
            event.tree();
        })
        const shujudata = reactive({
            gujiaping: true,//骨架屏
            editload: false,
            loading: true,
            disabled: false,//新增按钮
            name: "",//v-model
            gender: "",
            nick: "",
            account: "",
            birthday: null,
            dialogVisibleA: false,//对话框是否可见
            dialogVisibleB: false,
            defaultProps: { //树形组件绑定name
                children: 'children',
                label: 'name',
            },
            ids: "",//子组件
            names: "",
            lv: "",
            top: 'top',//----
            getname: "无",
            organizations: [],//----
            checked: [],
            item: [],
            data: [],
            oids: [],
            zids: [],
            list: [],

            isshow: true,//修改保存判断是否进行修改
            isPublish: '',
            page: 1,
        })
        const event = {
            //保存
            saveedit() {
                ElMessageBox.confirm('此操作将修改该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    shujudata.editload = true;
                    var obj = {
                        id: route.params.id,
                        account: shujudata.account,
                        name: shujudata.name,
                        gender: shujudata.gender,
                        birthday: shujudata.birthday,
                        nick: shujudata.nick
                    }
                    console.log("obj------", obj)
                    UpdateUser(obj).then((res: any) => {
                        shujudata.editload = false;
                        console.log("是否获取res=", res)
                        if (res.result === 0) {
                            ElMessage({
                                message: "修改成功",
                                type: 'success',
                            })
                            router.push("/organization/user");
                        } else {
                            shujudata.loading = false;
                            ElMessage({
                                message: "修改失败",
                                type: 'error',
                            })
                        }
                    })
                })
            },
            //子组件
            zhiwu(obj: any) {
                shujudata.disabled = false;
                if (shujudata.item.find((d: any) => d.oid == obj.oid) == undefined) {
                    shujudata.item.push(obj);
                } else {
                    shujudata.item = [];
                    shujudata.item.push(obj);
                }
                shujudata.dialogVisibleA = true;
                shujudata.dialogVisibleB = false;
                console.log("职务已选好--", shujudata.item)
            },
            //节点选中状态发生变化时的回调--树形控件的复选框选中事件
            change(item: any, bool: any) {
                console.log(item, bool);
                if (shujudata.checked.find((d: any) => d == item.id) == undefined) {
                    shujudata.checked.push(item.id);
                }
                if (bool) {
                    shujudata.dialogVisibleA = false;
                    shujudata.dialogVisibleB = true;
                    shujudata.lv = item.lv;
                    shujudata.ids = item.id;
                    shujudata.names = item.name;
                } else {
                    console.log("前", shujudata.checked);
                    for (let i = 0; i < shujudata.checked.length; i++) {
                        if (item.id == shujudata.checked[i]) {
                            shujudata.checked.splice(i, 1)
                        }
                        if (shujudata.item.length > 0) {
                            if (item.id == shujudata.item[i].oid) {
                                shujudata.item.splice(i, 1)
                            }
                        }
                        if (shujudata.organizations.length > 0) {
                            if (item.id == shujudata.organizations[i].oid) {
                                shujudata.organizations.splice(i, 1)
                            }
                        }
                    }
                    if (shujudata.item.length == 0) {
                        shujudata.disabled = true;
                    }
                }
            },
            //树型方法
            tree() {
                GetOrganizations({
                    page: shujudata.page,
                    limit: 999,
                }).then((res: any) => {
                    shujudata.gujiaping = false
                    console.log("组织------", res.data.data)
                    if (res.result === 0) {
                        shujudata.data = res.data.data;
                        shujudata.loading = false;
                    }
                })
            },
            //树形控件-确认
            confirmsave() {
                shujudata.dialogVisibleA = false;
                shujudata.organizations = [];
                shujudata.item.forEach((item: any) => {
                    shujudata.oids.push(item.oid)
                    shujudata.zids.push(item.zid)
                })
                console.log("组织-org", shujudata.organizations)
                ElMessageBox.confirm('确认更改该组织吗？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    shujudata.editload = true;
                    MoveUserToOrg({
                        uid: route.params.id,
                        oids: shujudata.oids,
                        zids: shujudata.zids,
                    }).then((res: any) => {
                        console.log("MoveUserToOrg的res=", res)
                        shujudata.editload = false;
                        if (res.result === 0) {
                            ElMessage({
                                message: "修改成功",
                                type: 'success',
                            })
                            router.push("/organization/user");
                        } else {
                            ElMessage({
                                message: "修改失败",
                                type: 'error',
                            })
                        }
                    })
                }).catch(() => {
                    shujudata.item = shujudata.list;
                    shujudata.checked = [];
                    shujudata.item.forEach((obj: any) => {
                        shujudata.checked.push(obj.oid)
                    })
                    ElMessage({
                        type: 'info',
                        message: '已取消更改'
                    });
                });
            },
            //详情数据
            userxiangqing() {
                GetSingleUser({
                    id: route.params.id
                }).then((res: any) => {
                    if (res.result === 0) {
                        shujudata.name = res.data.name;
                        shujudata.account = res.data.account;
                        shujudata.nick = res.data.nick == null ? "为什么是这个" : res.data.nick;
                        shujudata.gender = res.data.gender == null ? "男" : res.data.gender;
                        shujudata.birthday = res.data.birthday;
                        shujudata.organizations = res.data.organizations;
                        if (res.data.organizations.length > 0) {
                            res.data.organizations.forEach((arr: any) => {
                                shujudata.checked.push(arr.oid);
                                shujudata.item.push({ oname: arr.oname, zname: arr.zname, oid: arr.oid, zid: arr.zid });
                                shujudata.list.push({ oname: arr.oname, zname: arr.zname, oid: arr.oid, zid: arr.zid });
                            })
                        }
                    }
                })
            },
            //点击选择弹出对话框-显示树形控件数据
            select() {
                shujudata.dialogVisibleA = true;
            },
            //编辑的点击事件
            edit() {
                shujudata.isshow = false//isshow为假-不显示
                shujudata.editload = false;
            },
            //取消的点击事件
            quxiao() {
                event.userxiangqing();
                shujudata.isshow = true
                shujudata.item = [];
                shujudata.checked = [];
            },
        }
        return {
            ...toRefs(shujudata),
            ...event,
        }
    },
})
</script>



<style scoped>
.pageview {
    min-width: 720px;
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
}
</style>

